<template>
  <div class="comment">
		<h4 class="comment_title">发表评论 <span>(共 {{count}} 条评论)</span></h4>
        <div class="comment-form" v-show="!drawer">
			<div class="commentInfo">
                <div class="info">
					<el-input v-model="Form.name" placeholder="请输入昵称" maxlength="10"></el-input>
				</div>
                <div class="info">
					<el-input v-model="Form.email" placeholder="请输入邮箱"></el-input>
                </div>
                <div class="info">
					<el-input v-model="Form.website" placeholder="请输入网址"></el-input>
                </div>
			</div>
			<div ref="commentConent" class="commentContent" :class="{'clr-gray':isgray,'border-color':isBorderColor}" contenteditable="true" @blur="blurContent" @focus="focusContent" @keyup="keyupContent" v-html="Form.commentContent">
				
			</div>
			<div class="toolInfo">
                <div class="commonBar">
                    <div class="add-smilies" @click.stop="make_face()">
                        <i class="iconfont icon-smile"></i>
                        <ul id="face" v-show="faceFlag" @click.stop="choice_face($event)">
                            <li v-for="(item,index) in imgArr" :key="index">
                                <img :src="item.url" alt="" width="20" :title=item.title>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="btn">
                    <el-button type="primary" size="small" @click="handleSubmit">发布</el-button>
                </div>
            </div>
        </div>
        <!-- 评论列表 -->
        <ul class="comment_list_wrap" v-if="commentShow">
			<li class="comment_list comment_listFather" v-for="item in commentsArr" :key="item.id">
				<img :src="item.avatar" alt="" width="40" height="40" class="list_avatar">
				<div class="list_header">
					<a :name="'comment-'+item.id"></a>
					<a :href="item.url" target="_blank" class="author">{{item.author}}</a>
				</div>
                <div class="list_time">
                    <span class="time">{{item.createTime}}</span>
                    <span class="commentReply" @click="handleReply(item.id,item.author,item.id)">回复</span>    
                </div>
				<div class="list_content" v-html="item.comment">
					
				</div>
                <div class="comment_children" v-if="item.children.length > 0">
                    <ol class="comment_children_wrap">
                        <li class="comment_list" v-for="child in item.children" :key="child.id">
                            <img :src="child.avatar" alt="" width="40" height="40" class="list_avatar">
                            <div class="list_header">
                                <a :name="'comment-'+child.id"></a>
                                <a :href="child.url" target="_blank" class="author">{{child.author}}</a>
                            </div>
                            <div class="list_time">
                                <span class="time">{{child.createTime}}</span>
                                <span class="commentReply" @click="handleReply(child.id,child.author,item.id)">回复</span>    
                            </div>
                            <div class="list_content" v-html="child.comment">
                                
                            </div>
                        </li>
                    </ol>
                </div>
			</li>
		</ul>
		<div v-if="!commentShow" style="text-align:center;height:100px;line-height:100px;background:#f9f9f9;">
			<span>啊哦 , 暂时还没有评论呦！</span>
		</div>
        <el-drawer
        title=""
		@close="handleClosed"
        :visible.sync="drawer"
		direction="btt"
        size="350px"
        :with-header="true">
            <h2 slot="title">回复评论</h2>
            <div class="comment-form" style="width:1200px;margin:0 auto;">
                <div class="commentInfo">
                    <div class="info">
                        <el-input v-model="Form.name" placeholder="请输入昵称" maxlength="10"></el-input>
                    </div>
                    <div class="info">
                        <el-input v-model="Form.email" placeholder="请输入邮箱"></el-input>
                    </div>
                    <div class="info">
                        <el-input v-model="Form.website" placeholder="请输入网址"></el-input>
                    </div>
                </div>
                <div ref="commentConentR" class="commentContent" :class="{'clr-gray':isgray,'border-color':isBorderColor}" contenteditable="true" @blur="blurContent" @focus="focusContent" @keyup="keyupContent" v-html="Form.commentContent">
                    
                </div>
                <div class="toolInfo">
                    <div class="commonBar">
                        <div class="add-smilies" @click.stop="make_face()">
                            <i class="iconfont icon-smile"></i>
                            <ul id="face" v-show="faceFlag" @click.stop="choice_face($event)">
                                <li v-for="(item,index) in imgArr" :key="index">
                                    <img :src="item.url" alt="" width="20" :title=item.title>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="btn">
                        <el-button type="primary" size="small" @click="handleSubmit">发布</el-button>
                    </div>
                </div>
            </div>
        </el-drawer>

	</div>
</template>

<script>
import {postComment,getCommentsByArticleId} from "@/api/comments";
import {formatDateTime} from "@/tools/publicMethods"
export default {
    data() {
        return {
            Form: {
                name:"",
                email:"",
                website:"",
                commentContent:"请输入评论内容"
            },
            isgray:true,
            isBorderColor:false,
            faceFlag:false,
            imgArr:[
                {url:require("@/assets/images/smile/aini.gif"),title:"爱你"},
                {url:require("@/assets/images/smile/aixin.gif"),title:"爱心"},
                {url:require("@/assets/images/smile/aoman.gif"),title:"傲慢"},
                {url:require("@/assets/images/smile/baiyan.gif"),title:"白眼"},
                {url:require("@/assets/images/smile/bangbangtang.gif"),title:"棒棒糖"},
                {url:require("@/assets/images/smile/baojin.gif"),title:"爆筋"},
                {url:require("@/assets/images/smile/baoquan.gif"),title:"抱拳"},
                {url:require("@/assets/images/smile/bishi.gif"),title:"鄙视"},
                {url:require("@/assets/images/smile/bizui.gif"),title:"闭嘴"},
                {url:require("@/assets/images/smile/cahan.gif"),title:"擦汗"},
                {url:require("@/assets/images/smile/caidao.gif"),title:"菜刀"},
                {url:require("@/assets/images/smile/chi.gif"),title:"吃"},
                {url:require("@/assets/images/smile/ciya.gif"),title:"呲牙"},
                {url:require("@/assets/images/smile/dabing.gif"),title:"大兵"},
                {url:require("@/assets/images/smile/daku.gif"),title:"大哭"},
                {url:require("@/assets/images/smile/dan.gif"),title:"蛋"},
                {url:require("@/assets/images/smile/deyi.gif"),title:"得意"},
                {url:require("@/assets/images/smile/doge.gif"),title:"doge"},
                {url:require("@/assets/images/smile/fadai.gif"),title:"发呆"},
                {url:require("@/assets/images/smile/fanu.gif"),title:"发怒"},
                {url:require("@/assets/images/smile/fendou.gif"),title:"奋斗"},
                {url:require("@/assets/images/smile/ganga.gif"),title:"尴尬"},
                {url:require("@/assets/images/smile/gouyin.gif"),title:"勾引"},
                {url:require("@/assets/images/smile/guzhang.gif"),title:"鼓掌"},
                {url:require("@/assets/images/smile/haixiu.gif"),title:"害羞"},
                {url:require("@/assets/images/smile/hanxiao.gif"),title:"憨笑"},
                {url:require("@/assets/images/smile/haobang.gif"),title:"好棒"},
                {url:require("@/assets/images/smile/haqian.gif"),title:"哈欠"},
                {url:require("@/assets/images/smile/hecai.gif"),title:"喝彩"},
                {url:require("@/assets/images/smile/hexie.gif"),title:"河蟹"},
                {url:require("@/assets/images/smile/huaixiao.gif"),title:"坏笑"},
                {url:require("@/assets/images/smile/jie.gif"),title:"饥饿"},
                {url:require("@/assets/images/smile/jingkong.gif"),title:"惊恐"},
                {url:require("@/assets/images/smile/jingxi.gif"),title:"惊喜"},
                {url:require("@/assets/images/smile/jingya.gif"),title:"惊讶"},
                {url:require("@/assets/images/smile/juhua.gif"),title:"菊花"},
                {url:require("@/assets/images/smile/keai.gif"),title:"可爱"},
                {url:require("@/assets/images/smile/kelian.gif"),title:"可怜"},
                {url:require("@/assets/images/smile/koubi.gif"),title:"抠鼻"},
                {url:require("@/assets/images/smile/ku.gif"),title:"酷"},
                {url:require("@/assets/images/smile/kuaikule.gif"),title:"快哭了"},
                {url:require("@/assets/images/smile/kulou.gif"),title:"骷髅"},
                {url:require("@/assets/images/smile/kun.gif"),title:"困"},
                {url:require("@/assets/images/smile/lanqiu.gif"),title:"篮球"},
                {url:require("@/assets/images/smile/leiben.gif"),title:"泪奔"},
                {url:require("@/assets/images/smile/lenghan.gif"),title:"冷汗"},
                {url:require("@/assets/images/smile/liuhan.gif"),title:"流汗"},
                {url:require("@/assets/images/smile/liulei.gif"),title:"流泪"},
                {url:require("@/assets/images/smile/nanguo.gif"),title:"难过"},
                {url:require("@/assets/images/smile/OK.gif"),title:"OK"},
                {url:require("@/assets/images/smile/penxue.gif"),title:"喷血"},
                {url:require("@/assets/images/smile/piezui.gif"),title:"撇嘴"},
                {url:require("@/assets/images/smile/pijiu.gif"),title:"啤酒"},
                {url:require("@/assets/images/smile/qiang.gif"),title:"强"},
                {url:require("@/assets/images/smile/qiaoda.gif"),title:"敲打"},
                {url:require("@/assets/images/smile/qinqin.gif"),title:"亲亲"},
                {url:require("@/assets/images/smile/qiudale.gif"),title:"糗大了"},
                {url:require("@/assets/images/smile/quantou.gif"),title:"拳头"},
                {url:require("@/assets/images/smile/saorao.gif"),title:"骚扰"},
                {url:require("@/assets/images/smile/se.gif"),title:"色"},
                {url:require("@/assets/images/smile/shengli.gif"),title:"胜利"},
                {url:require("@/assets/images/smile/shouqiang.gif"),title:"手枪"},
                {url:require("@/assets/images/smile/shuai.gif"),title:"衰"},
                {url:require("@/assets/images/smile/shui.gif"),title:"睡"},
                {url:require("@/assets/images/smile/tiaopi.gif"),title:"调皮"},
                {url:require("@/assets/images/smile/touxiao.gif"),title:"偷笑"},
                {url:require("@/assets/images/smile/tu.gif"),title:"吐"},
                {url:require("@/assets/images/smile/tuosai.gif"),title:"托腮"},
                {url:require("@/assets/images/smile/weiqu.gif"),title:"委屈"},
                {url:require("@/assets/images/smile/weixiao.gif"),title:"微笑"},
                {url:require("@/assets/images/smile/woshou.gif"),title:"握手"},
                {url:require("@/assets/images/smile/wozuimei.gif"),title:"我最美"},
                {url:require("@/assets/images/smile/wunai.gif"),title:"无奈"},
                {url:require("@/assets/images/smile/xia.gif"),title:"吓"},
                {url:require("@/assets/images/smile/xiaojiujie.gif"),title:"小纠结"},
                {url:require("@/assets/images/smile/xiaoku.gif"),title:"笑哭"},
                {url:require("@/assets/images/smile/xiaoyanger.gif"),title:"小样儿"},
                {url:require("@/assets/images/smile/xieyanxiao.gif"),title:"斜眼笑"},
                {url:require("@/assets/images/smile/xigua.gif"),title:"西瓜"},
                {url:require("@/assets/images/smile/xu.gif"),title:"嘘"},
                {url:require("@/assets/images/smile/yangtuo.gif"),title:"羊驼"},
                {url:require("@/assets/images/smile/yinxian.gif"),title:"阴险"},
                {url:require("@/assets/images/smile/yiwen.gif"),title:"疑问"},
                {url:require("@/assets/images/smile/youhengheng.gif"),title:"右哼哼"},
                {url:require("@/assets/images/smile/youling.gif"),title:"幽灵"},
                {url:require("@/assets/images/smile/yun.gif"),title:"晕"},
                {url:require("@/assets/images/smile/zaijian.gif"),title:"再见"},
                {url:require("@/assets/images/smile/zhayanjian.gif"),title:"眨眼睛"},
                {url:require("@/assets/images/smile/zhemo.gif"),title:"折磨"},
                {url:require("@/assets/images/smile/zhouma.gif"),title:"咒骂"},
                {url:require("@/assets/images/smile/zhuakuang.gif"),title:"抓狂"},
                {url:require("@/assets/images/smile/zuohengheng.gif"),title:"左哼哼"}
            ],
			commentsArr:[],
            drawer:false, //回复的抽屉
			replayId:0,
			replayAuthor:"",
			parentId:0,
			count:0,
			commentShow:false
		};
    },
	created(){
		this.getComments();
	},
	mounted(){
		let _this = this;
		document.addEventListener("click",function(e){
			let oFace = document.getElementById('face');
			if(!oFace.contains(e.target)){
					_this.faceFlag = false
			}
		})
	},
    methods: {
        handleReply(id,author,pId){
            this.drawer = true;
			this.isgray = true;
			this.Form.commentContent = "@"+author+" "
			this.replayId = id;
			this.replayAuthor = author;
			this.parentId = pId;
        },
		handleClosed(){
			this.isgray = true;
			this.replayId = 0;
			this.replayAuthor = "";
			this.parentId = 0;
			this.Form.commentContent = "请输入评论内容";
		},
        focusContent(){
            this.isBorderColor = true;
			if(this.isgray){
				this.Form.commentContent = "";
				this.isgray = !this.isgray;
			}
        },
        blurContent(){
            this.isBorderColor = false;
			if(this.drawer){
				this.Form.commentContent = this.$refs.commentConentR.innerHTML;
			}else{
				this.Form.commentContent = this.$refs.commentConent.innerHTML;
			}
            if(this.Form.commentContent=="" || this.Form.commentContent=="请输入评论内容"){ 
                this.Form.commentContent = "请输入评论内容";
                this.isgray = true;
            }
        },
        keyupContent(){
            this.isgray = false;
        },
        handleSubmit(){
            if(!this.Form.name){
                this.$message.warning("请输入昵称");
                return false;
            }
            if(!this.Form.email){
                this.$message.warning("请输入邮箱");
                return false;
            }
            if(!this.Form.website){
                this.$message.warning("请输入网址");
                return false;
            }
            if(!this.Form.commentContent || this.Form.commentContent=="请输入评论内容"){
                this.$message.warning("请输入评论内容");
                return false;
            }
			
			let options = {};
			options.article_id = this.$route.params.id;
			options.ROwnerName = this.Form.name;	//昵称
            // options.RComments = this.Form.commentContent;	//内容
            
			options.RTime = new Date().getTime();
			options.email = this.Form.email;
            options.url = this.Form.website;
			if(this.drawer){	//回复别人的评论
				options.RComments = "@"+this.replayAuthor+" "+this.$refs.commentConentR.innerHTML;
				options.RRId = this.replayId;
				options.RTargetName = this.replayAuthor;
				options.parentId = this.parentId;
			}else{
				options.RComments = this.$refs.commentConent.innerHTML;
			}
            console.log(options);
			postComment(options).then(res => {
				if(res.id){
					this.$message.success("发布成功！");
                    this.getComments();
                    this.drawer = false;
					this.Form.commentContent = "请输入评论内容";
					this.isgray = true;
				}
			})
			
        },
        make_face(){
            this.faceFlag = true;
        },
        choice_face(e){
            if(e.target.nodeName=="IMG"){
                var choice=e.target;
                var cEle = choice.cloneNode(true); //深度复制，复制节点下面所有的子节点 ，直接将整个表情的IMG标签复制，并添加到发布框的<p></p>里面
				if(this.isgray){
					if(this.drawer){
						this.$refs.commentConentR.removeChild(this.$refs.commentConentR.childNodes[0]);
						this.$refs.commentConentR.appendChild(cEle);
					}else{
						this.$refs.commentConent.removeChild(this.$refs.commentConent.childNodes[0]);
						this.$refs.commentConent.appendChild(cEle);
					}
					
					this.isgray = !this.isgray;
				}else{
					if(this.drawer){
						this.$refs.commentConentR.appendChild(cEle);
					}else{
						this.$refs.commentConent.appendChild(cEle);
					}
					
				}
                
                this.faceFlag = false;
            }
        },
		getComments(){
			let articleId = this.$route.params.id;
			getCommentsByArticleId(articleId).then(res => {
				res.comments.map(item=>{
					item.RTime = formatDateTime(item.RTime);
					item.author = item.ROwnerName;
					item.comment = item.RComments;
					item.createTime = item.RTime;
					if(item.children.length > 0){
						item.children.map(childItem => {
							childItem.RTime = formatDateTime(childItem.RTime);
							childItem.author = childItem.ROwnerName;
							childItem.comment = childItem.RComments;
							childItem.createTime = childItem.RTime;
							return childItem;
						})
					}
					return item;
				})
				this.commentsArr = res.comments;
				this.count = res.count;
				if(this.count > 0){
					this.commentShow = true;
				}
			})
		}
    }
}
</script>

<style lang='stylus' scoped>
ul{
    list-style:none;
    margin:0;
    padding:0;
}
.comment{
	margin-top:20px;
	background:#fff;
	border-radius: 5px;
	padding: 20px 10px;
	.comment_title{
		font-size: 18px;
		span{
			font-weight:normal;
			font-size:12px;
		}
	}
	.comment-form{
		margin-top:10px;
		.commentInfo{
			display:flex;
			justify-content:space-between;
            margin-bottom:10px;
			.info{
				flex:1;
				margin-right:10px;
			}
			.info:last-child{
				margin-right:0;
			}
		}
		.commentContent{
			width:100%;
			box-sizing:border-box;
			height:130px;
			border:1px solid #DCDFE6;
            border-radius:3px;
			padding:0 15px;
			line-height:40px;
			color:#606266;
            outline:none;
			&.clr-gray{
				color:#bbb;
			}
            &.border-color{
                border-color:#409EFF;
            }
		}
        .toolInfo{
            margin-top:10px;
            margin-bottom:20px;
            display:flex;
            justify-content:space-between;
            .commonBar{
                .add-smilies{
                    position:relative;
                    padding:0;
					cursor:pointer;
                    .iconfont{
                        font-size:20px;
                    }
                    #face{
                        z-index:9;
                        position:absolute;
						left:0;
                        bottom:35px;
                        width:245px;
                        height:180px;
                        box-shadow:-2px 2px 10px 5px #eee;
                        overflow:auto;
                        border-radius:5px;
                        padding:10px;
                        background:#fff;
                        &::-webkit-scrollbar {/*滚动条整体样式*/
                            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
                            height: 4px;
                            scrollbar-arrow-color:red;
                
                        }
                        &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                            border-radius: 5px;
                            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                            /* background: rgba(0,0,0,0.2); */
                            background:#409EFF;
                            scrollbar-arrow-color:red;
                        }
                        &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                            border-radius: 0;
                            background: rgba(0,0,0,0.1);
                        }
                        li{
                            float:left;
                            width:30px;
                            height:30px;
                            line-height:30px;
                            text-align:center;
                            cursor:pointer;
                            &:hover{
                                background:#f5f5f5;
                            }
                            img{
                                vertical-align:middle;
                            }
                        }
                    }
                }
            }
        }
	}
    .comment_listFather{
        border-bottom:1px solid #ccc;
    }
    .comment_list{
		box-sizing: border-box;
		position: relative;
		width: 95%;
		margin: 0 0 10px 5%;
		padding: 5px 10px 10px 20px;
		border-radius: 4px;
		// background: #f0f2f7;
		.list_avatar{
			position:absolute;
			top:5px;
			left:-30px;
			border-radius:50%;
		}
		.list_header{
			.author{
                position:relative;
				text-decoration:none;
				font-size:16px;
				font-weight:700;
                cursor:pointer;
                // color:#06aaff;
                color:#0ab59b;
                &::after{
                    position:absolute;
                    bottom:-1px;
                    left:0;
                    content:"";
                    width:0;
                    height:1px;
                    transition:all .2s ease-in;
                    background:#0ab59b;
                }
				&:hover{
                    &::after{
                        width:100%;
                    }
				}
			}
		}
        .list_time{
            display:flex;
            justify-content:space-between;
            .time{
                position:relative;
                display:block;
                font-size: 12px;
			    color: #a8b6c0;
                cursor:pointer;
                &::after{
                    position:absolute;
                    bottom:-1px;
                    left:0;
                    content:"";
                    width:0;
                    height:1px;
                    transition:all .2s ease-in;
                    background:#0ab59b;
                }
				&:hover{
                    &::after{
                        width:100%;
                    }
				}
            }
            .commentReply{
                color:#0ab59b;
                cursor:pointer;
            }
        }
		.list_content{
			margin:5px 0;
            img{
                background-color:transparent;
            }
		}
        .comment_children{
			margin-top:15px;
            border-left:2px solid #0ab59b;
            .comment_children_wrap{
                .comment_list{
                    padding-right:0;
                    margin-bottom:0;
                }
            }
        }
		.list_footer{
			display:flex;
			justify-content:space-between;
			font-size: 12px;
			color: #a8b6c0;
			.opinion_btn{
				margin-left:10px;
				cursor:pointer;
			}
		}
	}
}
.clr-gray{
	color:#bbb;
}
</style>